<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="innerVisible"
    :close-on-press-escape="true"
    :close-on-click-modal="true"
    width="30%"
    center
  >
    <div style="border: 1px solid; height: 300px; overflow-y: auto">
      <div v-for="(item, $index) in fileList" :key="$index">
        <el-link
          :underline="false"
          style="
            cursor: pointer;
            font-size: 20px;
            font-weight: 500;
            margin-left: 10px;
          "
          @click="linkWenben(item, item.name)"
        >
          {{ item.name }}
        </el-link>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import vModelDialog from "@/mixins/vModelDialog";
// import pdfdiao from "./pdfyulan.vue";

import { downloadStrategies } from "@/components/PreviewFileDialog/util";

export default {
  mixins: [vModelDialog],
  props: {
    fileList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      // 标题
      title: "",
    };
  },
  methods: {
    linkWenben(val, name) {
      const fileType = val.type;
      const isImage = fileType.startsWith("image/");
      const isPDF = fileType.endsWith("pdf");

      // 校验是否视频
      const videoFileTypes = [
        "video/mp4",
        "video/ogg",
        "video/flv",
        "video/avi",
        "video/wmv",
        "video/rmvb",
        "video/mov",
      ];
      const videoFileType = videoFileTypes.find((type) =>
        new RegExp(val.type, "i").test(type)
      );

      // 校验该属性是否是图片文件
      if (isImage) {
        this.$bus.$emit("preview:image", {
          url: val.url,
          srcList: [val.url],
        });
      } else if (videoFileType !== undefined) {
        this.$bus.$emit("preview:video", {
          url: val.url,
        });
      } else if (isPDF) {
        fetch(val.url)
          .then((response) => response.blob())
          .then((blob) => {
            const objectUrl = URL.createObjectURL(blob);
            this.$openPreviewFileDialog({
              fileObj: {
                type: "pdf",
                url: objectUrl,
                name: val.name,
              },
            })
              .then(() => {})
              .catch(() => {});
          });
      } else {
        this.$message.info("正为您下载文件...");
        downloadStrategies.fetch
          .call(null, val.url, name)
          .then(() => {
            this.$message.success("文件《" + name + "》下载成功~");
          })
          .catch(() => {
            this.$message.error("文件下载异常，请重试!");
          });
      }
    },
  },
  created() {
    let vm = this;
    vm.title = "文件预览";
    console.log(this.fileList);
  },
};
</script>

<style lang="scss" scoped>
// 弹窗表头/关闭
::v-deep .el-dialog__header {
  background: rgb(204, 204, 204);
  padding: 10px;

  & .el-dialog__headerbtn {
    // display: none;
    position: absolute;
    // top: 8px;
    // right: 20px;
    top: 2px;
    right: 15px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    cursor: pointer;
    font-size: 30px;
    font-weight: 400;
  }
}
</style>
